<!-- daterange picker -->
<link rel="stylesheet" href="__PUBLIC__/AdminLTE/plugins/daterangepicker/daterangepicker.css">
<div class="content-wrapper">
    <section class="content-header">
        <h1>项目报价</h1>
        <ol class="breadcrumb">
            <li><a href="/"><i class="fa fa-dashboard"></i> 首页</a></li>
            <li class="active">报价管理</li>
            <li class="active">项目报价</li>
        </ol>
    </section>
    <section class="content">
        <div class="box">
            <div class="box-header with-border">
                <form class="form-inline" action="javascript:;" method="get">
                    <input id='quoted_upload' name="file_upload" type="hidden" value=''>
                    <input type="hidden" id="order_id" class="order_id" value="{$orderInfo.order_id}">
                    <div class="form-group pull-right">
                        <a class="btn btn-sm btn-primary" href="/Public/tpl/quoted.xls" target="_blank"><i class="fa fa-cloud-download"></i>下载模板</a>
                        <input id='upload' name="file_upload" type="button" value='上传' class='btn btn-sm btn-success'>
                    </div>
                </form>
            </div>
            <div class="box-body table-responsive">
                <table class="table table-bordered">
                    <thead>
                    <tr>
                        <div class="row">
                            <div class="col-sm-4 col-md-2">
                                <p class="text-left">客户名称：{$orderInfo.company_name}</p>
                            </div>
                            <!-- /.col -->
                            <div class="col-sm-4 col-md-2">
                                <p class="text-left">客户名称：{$orderInfo.company_name}</p>
                            </div>
                            <!-- /.col -->
                            <div class="col-sm-4 col-md-2">
                                <p class="text-left">类型：{$orderInfo.customer_type}</p>
                            </div>
                            <!-- /.col -->
                            <div class="col-sm-4 col-md-2">
                                <p class="text-left">产品名称：{$orderInfo.product_name}</p>
                            </div>
                            <!-- /.col -->
                            <div class="col-sm-4 col-md-2">
                                <p class="text-left">部门：{$orderInfo.department_name}</p>
                            </div>
                            <!-- /.col -->
                            <div class="col-sm-4 col-md-2">
                                <p class="text-left">部门人员：{$orderInfo.admin_name}</p>
                            </div>
                            <!-- /.col -->
                        </div>
                    </tr>
                    <tr>
                        <th>资源</th>
                        <th>询价类型</th>
                        <th>投放端&位置</th>
                        <th>投放广告位</th>
                        <th>投放吧</th>
                        <th>投放时间</th>
                        <th style="width: 100px">投放天数</th>
                        <th style="width: 100px">总价</th>
                        <th style="width: 100px">项目排期</th>
                        <th>报价详情</th>
                        <th style="width:60px;">拓展</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody id="quoted-order">
                    <if condition="count($orderItemList) eq 0"><tr><td class="text-center" colspan="12">暂无数据...</td></tr></if>
                    <foreach name="orderItemList" item="item">
                        <tr data-id="{$item.id}">
                            <td>{$item.item_name}</td>
                            <td>
                                <if condition="$item.quoted_type eq 1">
                                    <label class="label label-primary">预估报价</label>
                                    <elseif condition="$item.quoted_type eq 2" />
                                    <label class="label label-info">百度询价</label>
                                    <elseif condition="$item.quoted_type eq 3" />
                                    <label class="label label-warning">不询价</label>
                                </if>
                            </td>
                            <td>{$item.port}</td>
                            <td>{$item.place}</td>
                            <td>{$item.post_bar}</td>
                            <td>{$item.put_time}</td>
                            <td style="width: 100px"><input type="text" name="put_day" class="input-sm form-control" placeholder="投放天数" value="{$item.put_day}"/></td>
                            <td style="width: 100px"><input type="text" name="total_price" class="input-sm form-control" placeholder="总价" value="{$item.total_price}"/></td>
                            <td style="width:150px"><input type="text" class="form-control put-time-d" name="phase" id="phase" value="{$item.phase}"></td>
                            <td>
                                <if condition="$item.quoted_file neq ''">
                                    <a type="button" class="btn btn-sm btn-primary" href="/admin/index/downloadFile?file={$item.quoted_file|urlencode}"><i class="fa fa-cloud-download"></i>详情</a>
                                    <else />
                                    <label class="label label-default">暂未上传</label>
                                </if>
                            </td>
                            <td>
                                <php> $origin_data = json_decode($item['s_data'],true);</php>
                                <if condition="count($origin_data) gt 0">
                                    <button type="button" class="btn btn-xs btn-danger alert-tips" data-info='{$item.s_data|strval}'><i class="fa fa-arrow-circle-right"></i>详情</button>
                                    <else />
                                    <label class="text text-warning">无</label>
                                </if>
                            </td>
                            <td>
                                <!-- Button trigger modal -->
                                <button type="button" class="btn btn-sm btn-primary btn-upload" onclick="return showModal('{$item.id}')" data-toggle="modal" data-target="#exampleModal"><i class="fa fa-cloud-upload"></i>上传</button>
                            </td>
                        </tr>
                    </foreach>
                    </tbody>
                </table>
            </div>
            <div class="box-footer">
                <button class="btn btn-md btn-warning save-btn" type="button" data-type="quoted">确认报价</button>
                <button class="btn btn-md btn-primary btn-quote" type="button" data-type="quote">驳回报价</button>
                <button class="btn btn-md btn-danger btn-phase" type="button" data-type="phase">确认排期</button>
                <button class="btn btn-md btn-primary btn-phased" type="button" data-type="phased">驳回排期</button>
            </div>
        </div>
    </section>

    <!-- Modal1 -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-md" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">文件上传</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="upload-form" method="post" action="javascript:;" role="form" class="form-horizontal" enctype="multipart/form-data">
                        <input type="hidden" id="orderItem_id" name="orderItem_id" value="">
                        <div class="file-loading">
                            <input id="input-b9" name="import" type="file" value=''>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary save-upload">确定</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal2 -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="myModalLabel">排期备注</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <form role="form" class="form-horizontal" action="javascript:;" method="post">
                            <div class="form-group">
                                <label class="control-label col-sm-2">排期备注</label>
                                <div class="col-sm-9">
                                    <textarea class="form-control" rows="5" id="schedule_remark">{$orderInfo.schedule_remark}</textarea>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary save-btn-phase">确认</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
    <div class="modal fade" id="myRefuse" tabindex="-1" role="dialog" aria-labelledby="myRefuseLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="myRefuseLabel">驳回备注</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <form role="form" class="form-horizontal" action="javascript:;" method="post">
                            <div class="form-group">
                                <label class="control-label col-sm-2">驳回备注</label>
                                <div class="col-sm-9">
                                    <textarea class="form-control" rows="5" id="refuse_quote_reason">{$orderInfo.refuse_quote_reason}</textarea>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary save-btn-quote">确认</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
    <div class="modal fade" id="myPhase" tabindex="-1" role="dialog" aria-labelledby="myPhaseLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="myPhaseLabel">驳回备注</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <form role="form" class="form-horizontal" action="javascript:;" method="post">
                            <div class="form-group">
                                <label class="control-label col-sm-2">驳回备注</label>
                                <div class="col-sm-9">
                                    <textarea class="form-control" rows="5" id="refuse_phase_reason">{$orderInfo.refuse_phase_reason}</textarea>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary save-btn-phased">确认</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
</div>
<script src="__PUBLIC__/global/AjaxUpload.js"></script>
<script src="__PUBLIC__/global/jQuery.AjaxFileUpload/jquery.ajaxfileupload.js"></script>
<script src="__PUBLIC__/AdminLTE/plugins/layer/layer.js"></script>
<script>
    var orderInfo = {$orderInfo|json_encode};
    var order_id = orderInfo.order_id;
    //异步上传文件
    new AjaxUpload("#upload", {
        action: '/admin/order/ajaxOrderItemQuoted',
        type:"POST",
        name:'import',
        data:{order_id: order_id},
        responseType: 'json',
        onSubmit: function(file, ext) {
            if("xls,xlsx".indexOf(ext)<0){
                layer.msg("请上传xls/xlsx格式的文件");
                return false;
            }
            layer.load(1, {
                shade: [0.48,'#999'] //0.1透明度的白色背景
            });
        },
        onComplete: function(file, response) {
            layer.closeAll('loading');
            if(response.Code ==999) {
                layer.msg('上传成功');
                window.location.reload(true);
            }else{
                layer.msg(response.Msg);
                return false;
            }
        }
    });
    //报价
    $(".save-btn").click(function () {
        var order_id = $("#order_id").val();
        var type = $(this).attr('data-type');
        var post_data = [];
        $("#quoted-order> tr").each(function(i,obj){
            var t_obj = $(obj);
            var id = t_obj.attr('data-id');
            var price = t_obj.find("input[name='price']").val();
            var put_day = t_obj.find("input[name='put_day']").val();
            var total_price = t_obj.find("input[name='total_price']").val();
            var phase = t_obj.find("input[name='phase']").val();
            post_data.push({id:id,price:price,put_day:put_day,total_price:total_price,phase:phase})
        });
        $.post('/admin/order/ajaxSaveOrderQuoted',{
            type: type,
            order_id: order_id,
            post_data: post_data
        },function (_data) {
            if(_data.Code ==999) {
                ArtDialogHlp.showInfo('提示',"操作成功",function () {
                    window.location.reload(true);
                });
            }else{
                ArtDialogHlp.showInfo('提示',_data.Msg);
                return false;
            }
        },"JSON");
    });
    //排期
    $(".btn-phase").click(function () {
        $('#myModal').modal('show');
    });
    $(".save-btn-phase").click(function () {
        $('#myModal').modal('hide');
        var order_id = $("#order_id").val();
        var schedule_remark = $("#schedule_remark").val();
        var type = 'phase';
        var post_data = [];
        $("#quoted-order> tr").each(function(i,obj){
            var t_obj = $(obj);
            var id = t_obj.attr('data-id');
            var price = t_obj.find("input[name='price']").val();
            var put_day = t_obj.find("input[name='put_day']").val();
            var total_price = t_obj.find("input[name='total_price']").val();
            var phase = t_obj.find("input[name='phase']").val();
            post_data.push({id:id,price:price,put_day:put_day,total_price:total_price,phase:phase})
        });
        $.post('/admin/order/ajaxSaveOrderQuoted',{
            type: type,
            order_id: order_id,
            schedule_remark: schedule_remark,
            post_data: post_data
        },function (_data) {
            if(_data.Code ==999) {
                ArtDialogHlp.showInfo('提示',"操作成功",function () {
                    window.location.reload(true);
                });
            }else{
                ArtDialogHlp.showInfo('提示',_data.Msg);
                return false;
            }
        },"JSON");
    });

    //驳回报价
    $(".btn-quote").click(function () {
        $('#myRefuse').modal('show');
    });
    $(".save-btn-quote").click(function () {
        $('#myRefuse').modal('hide');
        var order_id = $("#order_id").val();
        var refuse_quote_reason = $("#refuse_quote_reason").val();
        var type = 'quote';
        $.post('/admin/order/ajaxOrderRefuse',{
            type: type,
            order_id: order_id,
            refuse_reason: refuse_quote_reason
        },function (_data) {
            if(_data.Code ==999) {
                ArtDialogHlp.showInfo('提示',"驳回成功",function () {
                    window.location.reload(true);
                });
            }else{
                ArtDialogHlp.showInfo('提示',_data.Msg);
                return false;
            }
        },"JSON");
    });

    //驳回排期
    $(".btn-phased").click(function () {
        $('#myPhase').modal('show');
    });
    $(".save-btn-phased").click(function () {
        $('#myPhase').modal('hide');
        var order_id = $("#order_id").val();
        var refuse_phase_reason = $("#refuse_phase_reason").val();
        var type = 'phase';
        $.post('/admin/order/ajaxOrderRefuse',{
            type: type,
            order_id: order_id,
            refuse_reason: refuse_phase_reason
        },function (_data) {
            if(_data.Code ==999) {
                ArtDialogHlp.showInfo('提示',"驳回成功",function () {
                    window.location.reload(true);
                });
            }else{
                ArtDialogHlp.showInfo('提示',_data.Msg);
                return false;
            }
        },"JSON");
    });

    function showModal(oit_id) {
        $('input[type="file"]').ajaxfileupload({
            action: '/admin/order/ajaxUploadQuotedDetail',
            valid_extensions : ['jpeg','jpg','png','xls','xlsx'],
            params: {
                order_id: order_id,
                orderItem_id: oit_id
            },
            onComplete: function(response) {
                layer.closeAll('loading');
                var _data = eval(response);
                console.info(_data);
                if(_data.Code ==999) {
                    layer.msg('上传成功');
                    window.location.reload(true);
                }else{
                    layer.msg(_data.Msg || _data.message);
                    return false;
                }
            },
            onStart: function() {
                $("#exampleModal").modal('hide');
                layer.load(1, {
                    shade: [0.48,'#999'] //0.1透明度的白色背景
                });
            },
            onCancel: function() {
                layer.msg('未选择文件');
            }
        });
    }

    $(".alert-tips").click(function () {
        var s_dataJson = $(this).attr('data-info');
        var s_od = jQuery.parseJSON(s_dataJson)||[];

        var html = "<div class='box'>" +
            "    <div class='box-header with-border'>" +
            "   拓展详情" +
            "    </div>" +
            "    <div class='box-body table-responsive'>" +
            "        <table class='table table-bordered'>" +
            "            <thead>" +
            "               <th>名称</th>" +
            "               <th>值</th>" +
            "            </thead>" +
            "            <tbody>";
        s_od.forEach(function (data,index) {
            html +="<tr><td>"+data.title+"</td><td>"+data.val+"</td</tr>";
        });
        html += "</tbody></table></div></div>";

        layer.open({
            type: 1,
            title: '提示',
            shadeClose: true,
            shade: [0.5,"#333333"],
            area: ['500px', '300px'],
            maxmin: false, //开启最大化最小化按钮
            content: html
        });
    });

</script>
<!-- date-range-picker -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
<script src="__PUBLIC__/AdminLTE/plugins/daterangepicker/daterangepicker.js"></script>
<script type="application/javascript">
    $(function () {
        //Date range picker
        $('.put-time-d').daterangepicker({
            autoUpdateInput: false,
            applyClass : 'btn-sm btn-success',
            cancelClass : 'btn-sm btn-default',
            opens: 'left',
            locale: {
                applyLabel: '确认',
                cancelLabel: '取消',
                fromLabel : '起始时间',
                toLabel : '结束时间',
                customRangeLabel : '自定义',
                weekLabel: 'W',
                daysOfWeek:['日','一','二','三','四','五','六'],
                monthNames:['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
                firstDay : 1
            },
            startDate: new Date(),
            endDate: new Date()
        });
        $('.put-time-d').on('apply.daterangepicker', function(ev, picker) {
            $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
        });
        $('.put-time-d').on('cancel.daterangepicker', function(ev, picker) {
            $(this).val('');
        });
    });
</script>